<template></template>
<script lang="ts" setup>
import { ref } from 'vue'
import {parelleTask} from '@/mock/utils/util.ts'

// 请求队列,使用类
class RequestQueue {
  private queue: any[] = [];
  private isProcessing = false;
  private maxConcurrency: number;
  constructor() {
    this.queue = [];
    this.isProcessing = false;
    this.maxConcurrency = 3;
  }

  add(request: () => Promise<unknown>) {
    this.queue.push(request);
    if (!this.isProcessing) {
      this.process();
    }
  }

  async process() {
    this.isProcessing = true;
    while (this.queue.length > 0) {
      const request = this.queue.shift();
      try {
        await request();
      } catch (error) {
        console.error('Request failed:', error);
      }
    }
    this.isProcessing = false;
  }
}

// 使用示例
const queue = new RequestQueue();

function mockRequest(id: number) {
  return () => new Promise(resolve => {
    setTimeout(() => {
      console.log(`Request ${id} completed`);
      resolve(id);
    }, Math.random() * 1000);
  });
}

queue.add(mockRequest(1));
queue.add(mockRequest(2));
queue.add(mockRequest(3));


const tasks = [
  mockRequest(1),
  mockRequest(2),
  mockRequest(3),
  mockRequest(4),
  mockRequest(5),
  mockRequest(6),
  mockRequest(7),
  mockRequest(8),
  mockRequest(9),
  mockRequest(10),
];
parelleTask(tasks, 3).then(()=>{
  console.log('所有任务完成');
})

</script>